<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../../static/css/msg.css" th:href="@{/css/msg.css}"/>
  <title>收发消息</title>
  <style>
    /* 样式可以根据需求自行调整 */
    #message-container {
      max-height: 300px;
      overflow-y: scroll;
      border: 1px solid #ccc;
      padding: 10px;
    }

    #message-input {
      margin-top: 10px;
    }
  </style>
</head>
<body>
<!-- 消息表格 -->
<div id="message-list">
  <table>
    <thead>
    <tr>
      <th>序号</th>
      <th>发送方</th>
      <th>消息内容</th>
      <th>发送时间</th>
      <th>是否阅读</th>
      <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr th:each="message:${messages}">
      <td th:text="${message.msgId}"></td>
      <td th:text="${message.sender}"></td>
      <td th:text="${message.msgContent}"></td>
      <td th:text="${message.sendTime}"></td>
      <td th:text="${message.status}"></td>
      <td><input type="checkbox"  name="isread" onclick="handleCheckbox(this)" ></td>
    </tr>
    </tbody>
  </table>
</div>
<!-- 空行 -->
<br>
<!-- 消息输入框 -->
<input type="text" id="message-sender" placeholder="接收方">
<input type="text" id="message-input" placeholder="输入消息">
<button onclick="sendMessage(this.value)" th:value="${username}" >发送消息</button>

<script th:src="@{/js/jquery-3.4.1.js}"></script>
<script>
  function sendMessage(username) {
    // 获取输入的消息内容
    var messageReceiver = $('#message-sender').val();
    var messageContent = $('#message-input').val();
    // 发送 Ajax 请求发送消息
    $.ajax({
      url: '/send', // 后端发送消息接口地址
      type: 'post',
      dataType: 'json',
      data: {
        sender: username,
        receiver: messageReceiver,
        content: messageContent
      },
      success: function () {
        // 发送成功后清空输入框
        $('#message-input').val('');
        alert('发送消息成功');
      },
      error: function () {
        console.log('发送消息失败');
        $('#message-input').val('');
        $('#message-sender').val('');
        alert('发送消息成功');
      }
    });
  }

  function handleCheckbox(checkbox) {
    if (checkbox.checked) {
      // 复选框已选中，执行相应操作
      console.log("复选框已选中");
      // 你还可以访问与复选框关联的行数据
      var rowData = checkbox.closest('tr');
      // 该行背景变灰
      rowData.style.backgroundColor = '#ccc';
      var msgId = rowData.cells[0].innerHTML;
      // 在数据库中改变行的status属性
      $.ajax({
        url: '/mark-as-read/', // 后端发送消息接口地址
        type: 'post',
        dataType: 'json',
        data: {
          messageId: msgId
        }
      });
    }
  }

</script>
</body>
</html>
